<template>
    <v-row justify="center">
        <v-dialog v-model="dialog" persistent max-width="600px">
            <v-card>
                <div class="close-btn" @click="closeLRPanel">关闭</div>
                <div class="lr-cate">
                    <div @click="switchLR(1)" :class="{active: LRI===1}">登录</div>
                    <div @click="switchLR(2)" :class="{active: LRI===2}">注册</div>
                </div>
                <div v-if="LRI===1">
                    <v-text-field v-model="username" label="玩家名" required></v-text-field>
                    <v-text-field :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'"
                                  label="密码" value="" v-model="password" class="input-group--focused"
                                  @click:append="show = !show"></v-text-field>
                    <v-row justify="end" align-content="center" align="center">
                        <v-col cols="12" sm="6" md="3">
                            <v-text-field v-model="loginCode" label="验证码" outlined></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6" md="3">
                            <img @click="$event.target.src = base_url + 'getNewLogVerifyCode?' + Math.random()" :src="base_url + 'getNewLogVerifyCode'" alt="登录验证码">
                        </v-col>
                    </v-row>
                    <v-btn @click="goLogin" x-large color="primary" dark>立即登录</v-btn>
                </div>
                <div v-else>
                    <v-text-field v-model="username" label="玩家名" required></v-text-field>
                    <v-text-field :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'"
                                  label="密码" value="" v-model="regPsd" class="input-group--focused"
                                  @click:append="show = !show"></v-text-field>
                    <v-text-field :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" :type="show ? 'text' : 'password'"
                                  label="确认密码" value="" v-model="regPsdConf" class="input-group--focused"
                                  @click:append="show = !show"></v-text-field>
                    <v-row justify="end" align-content="center" align="center">
                        <v-col cols="12" sm="6" md="3">
                            <v-text-field v-model="regCode" label="验证码" outlined></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="6" md="3">
                            <img @click="$event.target.src = base_url + 'getNewRegVerifyCode?' + Math.random()" :src="base_url + 'getNewRegVerifyCode'" alt="注册验证码">
                        </v-col>
                    </v-row>
                    <v-btn @click="goReg" x-large color="primary" dark>立即注册</v-btn>
                </div>
            </v-card>
        </v-dialog>
    </v-row>
</template>

<script>
    import ajax from '../Ajax'
    import common from '../common'

    export default {
        name: "LRPanel",
        props: {},
        data: () => ({
            username: '',
            password: '',
            LRI: 1,
            regPsd: '',
            regPsdConf: '',
            loginCode: '',
            regCode: '',
            show: false,
            dialog: false,
            base_url: ''
        }),
        methods: {
            switchLR(i) {
                this.LRI = i
            },
            closeLRPanel() {
                this.dialog = false // 关闭 LRPanel
            },
            goLogin() {
                if (this.username === '') {
                    this.$Message.warning('请填写用户名或电话号码')
                    return
                }
                if (this.password === '') {
                    this.$Message.warning('请填写密码')
                    return
                }
                if (this.loginCode === '') {
                    this.$Message.warning('请输入正确的登录验证码')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", this.username)
                param.append("password", this.password)
                param.append("loginCode", this.loginCode)
                ajax.post('/account/login', param).then(res => {
                    console.log(res)
                    if (res.data.code === 200) {
                        // 缓存数据
                        localStorage.setItem('username', this.username)
                        this.dialog = false // 关闭 LRPanel
                        this.username = ''
                        this.password = ''
                        this.$Message.success(res.data.msg)
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            },
            goReg() {
                if (this.username === '') {
                    this.$Message.warning('请填写用户名')
                    return
                }
                if (this.regPsd.length < 6) {
                    this.$Message.warning('密码必须大于等于6位')
                    return
                }
                if (this.regPsd !== this.regPsdConf) {
                    this.$Message.warning('两次密码不一致')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", this.username)
                param.append("password", this.regPsd)
                param.append("regCode", this.regCode)
                ajax.post('/account/regNewAccount', param).then(res => {
                    console.log(res)
                    if (res.data.code === 200) {
                        this.$Message.success('注册成功')
                        this.username = ''
                        this.regCode = ''
                        this.email = ''
                        this.regPsd = ''
                        this.LRI = 1
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            }
        },
        mounted() {
            this.base_url = ajax.base_url
        }
    }
</script>

<style scoped lang="scss">
    .close-btn {
        text-align: right;
        cursor: pointer;
        color: gray;
    }
    .lr-cate {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;

        div {
            width: 30%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            color: #81A6D2;
            cursor: pointer;
        }

        .active {
            border-bottom: 2px solid #5088C9;
            color: #5088C9;
        }
    }

    .v-card {
        padding: 50px;
        text-align: center;

        .v-btn {
            margin-top: 20px;
            font-size: 18px;
        }
    }
</style>
